<template>
	<div class="container">
		<div class="top">
			<div class="name flex nameColor">
				<img src="../assets/1212.jpg">
				{{orderList.name}}
			</div>
			<div class="serverTime flex">
				<div class="title">服务时间：</div>
				{{orderList.leftTime}}-{{orderList.rightTime}}
			</div>
			<div class="cost flex">
				<div class="title">时长费：</div>
				￥{{orderList.price}}.00
			</div>
			<div class="duration flex">
				<div class="title">服务时长：</div>
				共{{orderList.total}}小时
			</div>
			<div v-if="this.flags == 'A'"
				 class="discount flex">
				<div class="title1">优惠：￥50.00</div>
			</div>
			<div v-if="this.flags == 'B'"
				 class="discount flex">
				<div class="title1">优惠：￥60.00</div>
			</div>
			<div v-if="this.flags == 'C'"
				 class="discount flex">
				<div class="title1">优惠：￥90.00</div>
			</div>
		</div>
		<div class="center">
			<div class="tips">温馨提示</div>
			<div class="text">1.如茶室无占用情况，可提前10分钟扫描进入。</div>
			<div class="text">2.茶室设有自动售货机，如有需要可自行扫码购买。</div>
			<div class="text">3.请把握好使用时间，茶室将在时间结束后断开电源。</div>
		</div>
		<div class="bottom">
			<div class="left">
				<div>优惠</div>
				<div class="price"
					 v-if="this.flags == 'A'">￥50.00</div>
				<div class="price"
					 v-if="this.flags == 'B'">￥60.00</div>
				<div class="price"
					 v-if="this.flags == 'C'">￥90.00</div>
				<div class="price"
					 v-if="this.flags == 'N'">￥0.00</div>
			</div>
			<div class="right"
				 @click="goCashier"
				 v-if="this.flags == 'A'">去支付 ￥{{orderList.price-50}}.00</div>
			<div class="right"
				 @click="goCashier"
				 v-if="this.flags == 'B'">去支付 ￥{{orderList.price-60}}.00</div>
			<div class="right"
				 @click="goCashier"
				 v-if="this.flags == 'C'">去支付 ￥{{orderList.price-90}}.00</div>
			<div class="right"
				 @click="goCashier"
				 v-if="this.flags == 'N'">去支付 ￥{{orderList.price}}.00</div>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			orderList: "",
			price: "",
			flags: ""
		};
	},
	mounted() {
		var that = this;
		var params = that.$route.query;
		that.orderList = params;
		//新用户优惠
		//this.flags = sessionStorage.getItem("flags");
		// if (this.flags != "Y") {
		// 	that.price = params.price;
		// 	console.log("f n");
		// } else {
		// 	that.price = params.price - 200;
		// 	console.log("f y");
		// }
		//时长优惠
		var lengTime = this.orderList.total;
		this.flags = "N";
		if (lengTime == "2") {
			this.flags = "A";
		} else if (lengTime == "3") {
			this.flags = "B";
		} else if (lengTime == "4") {
			this.flags = "C";
		} else {
			this.flags = "N";
		}
		if (this.flags == "A") {
			that.price = params.price - 50;
			console.log("f a");
		} else if (this.flags == "B") {
			that.price = params.price - 60;
			console.log("f b");
		} else if (this.flags == "C") {
			that.price = params.price - 90;
			console.log("f c");
		} else {
			that.price = params.price;
			console.log("f y");
		}
	},
	methods: {
		//跳转到支付页面
		goCashier() {
			this.$router.push({
				path: "/cashier",
				query: {
					roomId: this.orderList.roomId,
					times:
						this.orderList.leftTime +
						"-" +
						this.orderList.rightTime,
					price: this.price,
					total: this.orderList.total
				}
			});
		}
	}
};
</script>
<style scoped>
.container {
	width: 100%;
	height: 100%;
	position: fixed;
	background: rgb(243, 244, 246);
	font-size: 13px;
}
.top,
.center,
.bottom {
	background: #fff;
}
.flex {
	display: flex;
	align-items: center;
}
.top {
	margin: 15px;
	padding: 15px;
	border-radius: 15px;
}
.name img {
	width: 130px;
	height: 130px;
	border-radius: 12px;
	margin-right: 15px;
}
.nameColor {
	color: rgb(61, 156, 161);
}
.title {
	color: rgb(159, 159, 159);
}
.title1 {
	color: rgb(61, 156, 161);
}
.serverTime,
.duration {
	margin: 10px 0;
}
.center {
	margin: 0 15px;
	padding: 15px;
	border-radius: 15px;
	color: rgb(159, 159, 159);
}
.tips {
	font-size: 4vw;
	color: #000;
	margin-bottom: 12px;
}
.text {
	height: 26px;
}
.bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 60px;
	position: fixed;
	bottom: 0;
	font-size: 4vw;
	padding: 0 10px;
	box-sizing: border-box;
}
.left {
	display: flex;
}
.price {
	color: rgb(220, 98, 22);
}
.right {
	background: rgb(61, 156, 161);
	height: 40px;
	line-height: 40px;
	padding: 0 20px;
	border-radius: 20px;
	color: #fff;
}
</style>
